import React from 'react'
import { Form, Input, Button } from 'antd'

const initialValues = {
  'test1': 'aaa'
}

function ListDemo() {
  const [form] = Form.useForm()
  const onFinish = values => {
    console.log('Received values of form: ', values)
  }

  const Reset = () => {
    form.resetFields()
  }

  const setValue = () => {
    form.setFieldsValue({ test1: '111', test2: '222' })
  }

  const setValue2 = () => {
    form.setFields([{ name: ['test2'], value: { a: 'this is test' } }])
  }

  return (
    <Form form={form} onFinish={onFinish} initialValues={initialValues}>
      <Form.Item name="test1" initialValue="abc">
        <Input />
      </Form.Item>

      <Form.Item name="test2">
        <Form.Item name={['test2', 'a']} initialValue="eee">
          <Input />
        </Form.Item>
      </Form.Item>

      <Button type="primary" htmlType="submit">Submit</Button>
      <Button type="primary" onClick={Reset}>Reset</Button>
      <Button type="primary" onClick={setValue2}>setValue</Button>
    </Form>
  )
}
export default ListDemo
